import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import './index.css'; // 假设有一个CSS文件来处理样式
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux';

export default function Login() {

  const dispatch = useDispatch();
  const [form] = Form.useForm();

  function handleOnClick() {
    const account = form.getFieldValue("account");
    const password = form.getFieldValue("password");
    const userInfo = {
      account,
      password
    }
    console.log(userInfo);
  }


  return (
    <div className='login-container'>
      <div className="login-card">
        <div className="left">
          <span className='title'>外卖管理台</span>
        </div>
        <div className="right">
          <Form form={form}>
            <Form.Item name="account" label={<span className="custom-label">用户名</span>}>
              <Input placeholder="请输入账号" />
            </Form.Item>
            <Form.Item name="password" label={<span className="custom-label">密码</span>}>
              <Input type="password" placeholder="请输入密码" />
            </Form.Item>
            <Form.Item>
              <Button className='login-btn' block onClick={handleOnClick}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>

      </div>
    </div>

  );
}